<template>
    <div class="applyFor">
        <van-nav-bar title="修改密码" left-text="" left-arrow @click-left="onClickLeft" />
        <!-- <div class="topTitle">
        <title-item title1st="请填写修改的资料信息"> </title-item>
      </div> -->
        <div class="Form">
            <van-form @failed="onFailed" @submit="onSubmit">
                <van-cell-group inset>
                    <!-- 通过 pattern 进行正则校验 -->
                    <van-field v-model="phone" name="phone" label="账号" label-width="45" placeholder="请输入账号"
                        :rules="[{ validator, message: '请输入正确内容' }]" />
                    <!-- 通过 validator 进行函数校验 -->
                    <van-field v-model="password" label-width="45" type="password" name="password" label="新密码"
                        placeholder="请输入新密码" :rules="[{ required: true, message: '请新密码' }]">
                        <template #button>
                            <van-button @click="sendCode" :disabled="disabled" native-type="button" plain type="success"
                                size="mini">
                                {{ codeMsg }}
                            </van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px">
                    <van-button round block native-type="submit" color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 100%)">
                        提交
                    </van-button>
                </div>
            </van-form>
            <van-popup v-model:show="showPicker" position="bottom">
                <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>
        </div>
    </div>
</template>
  
<script setup>
import { showNotify } from 'vant';
import TitleItem from "@/components/title-item/title-item.vue";
import { closeToast, showLoadingToast } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const phone = ref("");
const password = ref("");
const result = ref("");
const showPicker = ref(false);
const codeNum = ref(6)
const columns = [
    { text: "杭州", value: "Hangzhou" },
    { text: "宁波", value: "Ningbo" },
    { text: "温州", value: "Wenzhou" },
    { text: "绍兴", value: "Shaoxing" },
    { text: "湖州", value: "Huzhou" },
];
const codeMsg = ref('获取短信验证码')
const disabled = ref(false)
const onConfirm = ({ selectedOptions }) => {
    result.value = selectedOptions[0]?.text;
    showPicker.value = false;
};
// const value4 = ref("");
// const pattern = /\d{6}/;

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val) =>
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
        val
    );

const onFailed = (errorInfo) => {
    console.log("failed", errorInfo);
};
const onSubmit = (val) => {
    console.log(val, '成功的值')
}
// 返回按钮
const onClickLeft = () => {
    router.back();
};
// 获取短信验证码
const sendCode = () => {
    // 验证手机号格式是否正确
    console.log(phone, 'phone')
    console.log(validator(phone.value), '11')
    if (!validator(phone.value)) return showNotify({ message: '提示' });
    // 禁用按钮
    disabled.value = true;
    // 倒计时
    let timer = setInterval(() => {
        codeNum.value--;
        codeMsg.value = `重新发送(${codeNum})`;
    }, 1000);
    // 判断什么时候停止定时器
    setInterval(() => {
        clearInterval(timer);
        codeNum.value = 6;
        disabled.value = false;
        codeMsg.value = "获取短信验证码";
    }, 6000);
}
</script>
  
<style lang="scss" scoped>
.applyFor {
    padding: 20px;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    color: #1d1b20;

    .topTitle {
        margin-left: -4px;
    }
}
</style>
  